<template>
    <!-- 设备管理 -->
  <div v-loading="loading" element-loading-text="拼命加载中">
    <el-row>
      <!-- 搜索框 -->
      <el-col :span="24">
        <div class="search-wrapper">
          <ul class="search-box">
            <li><span class="filter-name">设备类别：</span>
              <el-select v-model="listQuery.equipType" placeholder="请选择" clearable style="width:130px"
                         class="filter-item">
                <el-option v-for="item in equipTypeOptions" :key="item.dictId" :label="item.dictName"
                           :value="item.dictValue"/>
              </el-select>
            </li>
            <li><span class="filter-name">所属河段：</span>
              <el-select v-model="listQuery.riverName" placeholder="请选择" clearable style="width:150px" class="filter-item">
                <el-option label="长江" value="1"></el-option>
                <el-option label="黄河" value="2"></el-option>
                  <el-option label="钱塘江" value="3"></el-option>
              </el-select>
            </li>
            <li style="padding-left:10px;"><el-button style="vertical-align:middle;margin-top:-2px;" round size="mini" type="primary" @click="getList">查询</el-button></li>
          </ul>
        </div>
      </el-col>
      <!-- 按钮区 -->
      <el-col :span="24">
        <div class="button-wrapper">
          <el-button type="primary" style="vertical-align:middle;margin-top:10px;margin-left: 5px" round size="mini" @click="dialogFormVisible = true">新增</el-button>
          <el-button type="danger" style="vertical-align:middle;margin-top:10px;" round size="mini" @click="batchEdit(-1)">删除</el-button>
        </div>
      </el-col>
    </el-row>
      <!-- 表格 -->
      <el-row>
        <el-col :span="24">
          <div class="data-wrapper">
            <template v-if="tableData3!=null">
              <el-table ref="multipleTable" :data="tableData3"  tooltip-effect="dark" style="width: 100%"
                        @selection-change="handleSelectionChange">
                <el-table-column type="selection" label="全选" width="55">
                </el-table-column>
                <el-table-column type="index" width="50" label="序号" :index="indexMethod">
                </el-table-column>
                <el-table-column prop="equipCode" label="设备编码" width="180">
                </el-table-column>
                <el-table-column prop="equipName" label="设备名称" width="180">
                </el-table-column>
                <el-table-column prop="equipType.name" label="设备类别" width="200">
                </el-table-column>
                <el-table-column prop="riverFlow" label="所属街镇" width="200">
                </el-table-column>
                  <el-table-column prop="riverName" label="所属河段" width="120">
                  </el-table-column>
                <el-table-column label="经纬度" width="180" >
                  <template slot-scope="scope">
                    <span>{{ scope.row.longitude}}/{{ scope.row.latitude}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="partsName" label="关联部件" width="120">
                </el-table-column>
                <el-table-column prop="partsCode" label="关联部件编码" width="120" >
                </el-table-column>
                <el-table-column label="GIS地图">
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="200">
                  <template slot-scope="scope">
                    <el-button title="告警阈值" size="small" icon="el-icon-bell" type="warning" circle></el-button>
                    <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle @click="handleView(scope.$index, scope.row)"></el-button>
                    <el-button title="编辑" size="small" icon="el-icon-edit" type="success" circle @click="handleEdit(scope.$index, scope.row)"></el-button>
                    <el-button title="删除" size="small" icon="el-icon-delete" type="danger" circle @click="deleteEquipById(scope.$index, scope.row)"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
        </el-col>
      </el-row>
      <!-- 底部按钮和分页 -->
      <el-row :gutter="20" v-if="dataCount" type="flex" justify="space-between" align="center" class="page-wrapper">
        <el-col :span="24">
          <div class="page-item">
            <el-pagination background
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page.sync="listQuery.currentPage"
               :page-sizes="pageSizes"
               :page-size="listQuery.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="dataCount"/>
          </div>
        </el-col>
      </el-row>

    <!-- 新增弹窗 -->
    <el-dialog title="新增设备" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form">
        <el-row :gutter="5">
          <el-col :span="24">
            <el-form-item label="所属区域" :label-width="formLabelWidth" prop="selectedAddress">
              <el-cascader :options="treeData"
                           :props="addProps"
                           :change-on-select="true"
                           class="width-all"
                           v-model="form.selectedAddress"
                           @change="handleChange"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 18px">
          <el-col :span="12">
            <el-form-item label="所属河湖" :label-width="formLabelWidth" prop="riverId">
              <el-select v-model="form.riverId" placeholder="请选择" clearable class="filter-item" @change="getRiverParts">
                <el-option v-for="item in equipTypeRiverOptions" :key="item.riverId" :label="item.riverName"
                           :value="item.riverId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="河湖部件" :label-width="formLabelWidth">
              <el-select v-model="form.partsId" placeholder="请选择" clearable class="filter-item">
                <el-option v-for="item in equipTypeRiverPartsOptions" :key="item.partsId" :label="item.partsName"
                           :value="item.partsId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 18px">
          <el-col :span="12">
            <el-form-item label="设备类别" :label-width="formLabelWidth" prop="equipType">
              <el-select v-model="form.equipType" placeholder="请选择" clearable class="filter-item">
                <el-option v-for="item in equipTypeOptions" :key="item.dictId" :label="item.dictName"
                           :value="item.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编码" :label-width="formLabelWidth">
              <el-input v-model="form.equipCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 18px">
          <el-col :span="12">
            <el-form-item label="设备名称" prop="equipName" :label-width="formLabelWidth">
              <el-input v-model="form.equipName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备介绍" :label-width="formLabelWidth">
              <el-input v-model="form.equipNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 18px">
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude" :label-width="formLabelWidth">
              <el-input v-model="form.longitude" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude" :label-width="formLabelWidth">
              <el-input v-model="form.latitude" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5" style="margin-top: 18px">
          <el-col :span="12">
            <el-form-item label="设备的详细地址" :label-width="formLabelWidth">
              <el-input v-model="form.equipAddress" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备制造厂商" :label-width="formLabelWidth">
              <el-input v-model="form.equipFactory" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible = false">取 消</el-button>
        <!--<el-button size="medium" type="primary" @click="resetForm('form')">重 置</el-button>-->
        <el-button size="medium" type="success" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!--查看  -->
    <el-dialog title="设备信息查看" :visible.sync="dialogFormVisible2">
      <el-form v-if="oneCol">
        <el-row :gutter="10">
          <el-col :span="12">
            设备类别： {{oneCol.equipType}}
          </el-col>
          <el-col :span="12">
            设备编码： {{oneCol.equipCode}}
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            设备名称： {{oneCol.equipName}}
          </el-col>
          <el-col :span="12">
            设备介绍： {{oneCol.equipNote}}
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            经度： {{oneCol.longitude}}
          </el-col>
          <el-col :span="12">
            纬度： {{oneCol.latitude}}
          </el-col>
        </el-row><el-row :gutter="10">
        <el-col :span="12">
          设备的详细地址： {{oneCol.equipAddress}}
        </el-col>
        <el-col :span="12">
          设备制造厂商： {{oneCol.equipFactory}}
        </el-col>
      </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            所属河段： {{oneCol.riverName}}
          </el-col>
          <el-col :span="12">
            所属街道： {{oneCol.riverFlow}}
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            关联部件名称：{{oneCol.partsName}}
          </el-col>
          <el-col :span="12">
            关联部件编码：{{oneCol.partsCode}}
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="dialogFormVisible2 = false">确 定</el-button>
      </div>
    </el-dialog>

    <!--编辑  -->
    <el-dialog title="设备信息编辑" :visible.sync="dialogFormVisible1">
      <el-form :model="oneCol" v-if="oneCol" :rules="rules" ref="oneCol">
        <el-row :gutter="5">
          <el-col :span="24">
            <el-form-item label="所属区域" :label-width="formLabelWidth" prop="selectedAddress">
              <el-cascader :options="treeData"
                           :props="addProps"
                           :change-on-select="true"
                           class="width-all"
                           v-model="oneCol.selectedAddress"
                           @change="handleChange"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属河湖" :label-width="formLabelWidth" prop="riverId">
              <el-select v-model="oneCol.riverId" placeholder="请选择" clearable class="filter-item" @change="getRiverParts">
                <el-option v-for="item in equipTypeRiverOptions" :key="item.riverId" :label="item.riverName"
                           :value="item.riverId"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="河湖部件" :label-width="formLabelWidth">
              <el-select v-model="oneCol.partsId" placeholder="请选择" clearable class="filter-item">
                <el-option v-for="item in equipTypeRiverPartsOptions" :key="item.partsId" :label="item.partsName"
                           :value="item.partsId"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="设备类别" :label-width="formLabelWidth" prop="equipType">
              <el-select v-model="oneCol.equipType" clearable placeholder="请选择新闻类型" class="filter-item">
                <el-option v-for="item in equipTypeOptions" :key="item.dictId" :label="item.dictName" :value="item.dictValue"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编码" :label-width="formLabelWidth">
              <el-input v-model="oneCol.equipCode" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="设备名称" :label-width="formLabelWidth" prop="equipName">
              <el-input v-model="oneCol.equipName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备介绍" :label-width="formLabelWidth">
              <el-input v-model="oneCol.equipNote" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="经度" :label-width="formLabelWidth" prop="longitude">
              <el-input v-model="oneCol.longitude" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纬度" :label-width="formLabelWidth" prop="latitude">
              <el-input v-model="oneCol.latitude" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="设备的详细地址" :label-width="formLabelWidth">
              <el-input v-model="oneCol.equipAddress" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备制造厂商" :label-width="formLabelWidth">
              <el-input v-model="oneCol.equipFactory" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button size="medium" type="primary" @click="updateEquip">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
    data(){
        return {
            //设备类别下拉值
            equipTypeOptions:[],
            equipTypeRiverOptions:[],
            equipTypeRiverPartsOptions:[],
            tableData3:null,
            loading:false,
            multipleSelection: [],
            //默认数据总数
            dataCount:0,
            pageSizes:[5, 10, 20, 30, 40],
            //查询条件
            listQuery: {
                currentPage:1,
                pageSize:5
            },
            formLabelWidth: '120px',
            dialogFormVisible:false,
            dialogFormVisible1:false,
            dialogFormVisible2:false,
            //声明的一个单行表格数据
            oneCol:{
            },
            form: {
            },
            addProps: {
                label:'regName',
                value:'regId',
                children: 'children'
            },
            rules: {
                selectedAddress:[{
                    required: true, message: '请选择区域', trigger: 'change'
                }],
                equipType:[
                    { required: true, message: '请选择设备类型', trigger: 'change' }
                ],
                riverId:[
                    { required: true, message: '请选择所属河湖', trigger: 'change' }
                ],
                equipName:[
                    { required: true, message: '请输入设备名称', trigger: 'blur' }
                ],
                longitude:[
                    { required: true, message: '请输入经度', trigger: 'blur' }
                ],
                latitude:[
                    { required: true, message: '请输入纬度', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getList();
        this.getEquipTypeOptions();
    },
    computed:{
        treeData:function(){
            return this.$store.state.dropTree
        }
    },
    methods:{
        getList() {
            this.loading=true;
            this.postRequest('/api/rcs/equips/getEquipList',this.listQuery).then((res)=>{
                var data = res.data;
                if(data.status == 200){
                    this.tableData3=data.data
                    this.dataCount=data.count;
                    this.loading = false;
                }else{
                    this.$message.error(data.msg);
                }
            })
                .catch((error)=>{
                    //错误信息
                    this.$message.error(error);
                })
        },
        //获取设备类型字典值
        getEquipTypeOptions(){
            this.getDictionary({types:["EQUIP_TYPE"]}).then(res => {
                var data = res.data;
                if(data.status == 200){
                    this.equipTypeOptions = data.data["EQUIP_TYPE"];
                }else{
                    this.$message.error(data.msg);
                }
            })
                .catch((error)=>{
                    this.$message.error(error)
                })
        },
        getRiverByRegId(value){
            //获取该用户的区域
            //var userRegId = JSON.parse(window.localStorage.getItem('user')).value.regId.code;
            //获取该用户所属区域的河湖
            this.getRequest("/api/rcs/getRiversByRegId",{regId:value}).then((res)=>{
                if(res.data.status == 200){
                    this.equipTypeRiverOptions = res.data.data;
                }else{
                    this.$message.error(res.data.msg);
                }
            })
                .catch((error)=>{
                    this.$message.error(error)
                })
        },
        getRiverParts(value){
            //value 就是选中的河湖的id
            //获取该用户所属区域的河湖所绑定的部件
            debugger
            this.getRequest("/api/rcs/getPartsById",{riverId:value}).then((res)=>{
                if(res.data.status == 200){
                    this.equipTypeRiverPartsOptions = res.data.data;
                }else{
                    this.$message.error(res.data.msg);
                }
            })
                .catch((error)=>{
                    this.$message.error(error)
                })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        indexMethod(index) {
            return (index+1)+(this.listQuery.currentPage-1)*this.listQuery.pageSize;
        },
        handleSizeChange(size) {
            this.listQuery.pageSize=size;
            this.listQuery.currentPage=1;
            this.getList()
        },
        handleCurrentChange(currentPage) {
            this.listQuery.currentPage=currentPage;
            this.getList()
        },
        //查看,编辑操作
        handleView(index, row){
            let rowData = Object.assign({},row);
            this.oneCol=rowData;
            this.oneCol.equipType = rowData.equipType.name;
            this.dialogFormVisible2=true;
        },
        handleEdit(index, row){
            let rowData = Object.assign({},row);
            this.oneCol=rowData;
            this.oneCol.equipType = rowData.equipType.code;
            var regId =  this.oneCol.regId;

            //区域下拉列表数据初始化
            var prefix = regId.substr(0,1);

            var codeValue = regId.substr(1);

            var count = codeValue.length/2;
            var subLen = 2;
            var codeArr=[];
            for(var i=0;i<count;i++){
                codeArr.push(prefix+codeValue.substr(0,subLen));
                subLen = subLen+2;
            }
            this.oneCol.selectedAddress = codeArr;
            this.dialogFormVisible1=true;
        },
        updateEquip(){
            var url = "/api/rcs/equip";
            this.putRequest(url,this.oneCol).then((res)=>{
                if(res.data.status == 200){
                    this.dialogFormVisible1 = false;
                    this.$message.success('修改设备信息成功！');
                    this.oneCol = {};
                    this.getList()
                }else{
                    this.$message.error("修改设备信息失败！");
                }
            })
                .catch((error)=>{
                    //错误信息
                    this.$message.error(error)
                })
        },
        //删除单条
        deleteEquipById(index,row){
            var url = "/api/rcs/equip/deleteById";
            this.$confirm("确认删除？").then(_ => {
            this.postRequest(url,row).then((res)=>{
                if(res.data.status == 200){
                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                    this.getList()
                }else{
                    this.$message.error("删除失败！");
                }
            })
                .catch((error)=>{
                    //错误信息
                    this.$message.error(error)
                })
            })
        },
        //批量操作
        batchEdit(val) {
            if(this.multipleSelection.length <= 0){
                this.$message.warning('请至少选择一条数据！');
                return;
            }
            var strArr = [];
            for (var i = 0; i < this.multipleSelection.length; i++) {
                strArr.push(this.multipleSelection[i].equipId);
            }
            //前面三个参数分别是 表名，状态字段名，id字段名
            //status 为状态值 （0：正常  9：停用 -1：删除）
            //ids 为需要批量操作的 id数组
            var submitData = {
                tableName: "b_equip",
                tableCol: "equip_state",
                tableId: "equip_id",
                status: val,
                ids: strArr
            };

            this.$confirm("确认批量操作？").then(_ => {
                this.putRequest("/api/common/batch", submitData)
                    .then(res => {
                        var data = res.data;
                        if (data.status == 200) {
                            this.$message.success(data.msg);
                            this.getList();
                        } else {
                            this.$message.error(data.msg);
                        }
                    })
                    .catch(error => {
                        //错误信息
                        this.$message.error(error);
                    });
            });
        },
        //新增
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    var url = "/api/rcs/equips/addEquipMessage";
                    this.postRequest(url,this.form).then((res)=>{
                        if(res.data.status == 200){
                            this.dialogFormVisible = false;
                            this.$message({
                                message: '新增成功！',
                                type: 'success'
                            });
                            this.form = {};
                            this.getList()
                        }else{
                            this.$message.error("新增失败！");
                        }
                    })
                        .catch((error)=>{
                            //错误信息
                            this.$message.error(error)
                        })
                } else {
                    this.$message.error('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        //级联下拉框change事件
        handleChange(value) {
            this.oneCol.selectedAddress=value;
            this.form.regId=value[value.length-1];
            this.oneCol.regId=value[value.length-1];
            this.getRiverByRegId(value[value.length-1]);
        }
    },
  mounted(){},
  updated(){},
  destroyed(){},
}
</script>
<style scoped>

</style>